<script setup>
import BaseBadge from "@/coachfinder/components/ui/BaseBadge.vue";
import BaseButton from "@/coachfinder/components/ui/BaseButton.vue";
import BaseCard from "@/coachfinder/components/ui/BaseCard.vue";
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();

const selectedCoach = store.getters.coaches.find(
  (coach) => coach.id === +route.params.id
);

const fullName = computed(() => {
  return selectedCoach.firstName + " " + selectedCoach.lastName;
});

const contactLink = computed(() => {
  return route.path + "/contact";
});
</script>

<template>
  <div>
    <section>
      <BaseCard>
        <h2>{{ fullName }}</h2>
        <h3>${{ selectedCoach.hourlyRate }}/hour</h3>
      </BaseCard>
    </section>
    <section>
      <BaseCard>
        <header>
          <h2>Interested? Reach out now!</h2>
          <BaseButton link :to="contactLink">Contact</BaseButton>
        </header>
        <router-view></router-view>
      </BaseCard>
    </section>
    <section>
      <BaseCard>
        <BaseBadge
          v-for="area in selectedCoach.areas"
          :key="area"
          :type="area"
          :title="area"
        ></BaseBadge>
        <p>{{ selectedCoach.description }}</p>
      </BaseCard>
    </section>
  </div>
</template>
